@charset "UTF-8";

@import '~scss/themes/index.scss';

/**
  面板




*/

$component-name: 'panel';

$panel-margin-bottom: $component-margin-v;

$panel-padding: $h-spacing-base;

$panel-border-radius: $radius-md;

.ui-#{$component-name} {
  background-color: $fill-base;
  overflow: hidden;
  margin-bottom: $panel-margin-bottom;
  border-radius: $panel-border-radius;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  // 面板的头部
  .#{$component-name}-header {
    padding: $panel-padding;
    border-bottom: 1px solid transparent;
    border-top-left-radius: $panel-border-radius;
    border-top-right-radius: $panel-border-radius;

    .#{$component-name}-title {
      margin: 0;
      font-size: $font-size-heading;
      color: $color-text-base;
    }
  }

  // 面板内容
  .#{$component-name}-content {
    padding: $panel-padding;
  }

  // 面板的尾部
  .#{$component-name}-footer {
    padding: $panel-padding;
    background-color: $fill-base;
    border-top: 1px solid $border-color-base;
    border-bottom-left-radius: $panel-border-radius;
    border-bottom-right-radius: $panel-border-radius;
  }
}
